<template>
  <div class="container d-inline-flex justify-content-center">
    <div
      class="indicator"
      v-for="item in indicatorNum"
      :class="{ active: indicatorIndex === item - 1 }"
      :key="item"
    ></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  indicatorNum: {
    type: Number,
    default: 0
  },
  indicatorIndex: {
    type: Number,
    default: 0
  }
})
</script>

<style lang="scss" scoped>
.indicator {
  width: 32px;
  height: 12px;
  border-radius: 14px;
  background: rgba(217, 217, 217, 0.1);
  & + .indicator {
    margin-left: 1.25rem;
  }
  &.active {
    background: #9c04c7;
    opacity: 1;
  }
}
</style>
